<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>坦克移动</title>  
    <style type="text/css">
        input{font-size:26px;margin-top: 20px;}
        body{background-image: url(images/grassland.png);}
        #mytank{position: absolute;left:10px;top:100px}
    </style> 
    <style>
        .ll{
            width: 1200px;
            height: 650px;
        }
    </style>
</head>  
<body>
    <img src="imher/grassland.png" alt="" class="ll">  
    <img id="mytank" src="imher/up.png"/>
    <script>  
  
        // 坦克的初始位置  
        var tank = document.getElementById('mytank');  
        var tankRect = tank.getBoundingClientRect();  
        var tankX = tankRect.left;  
        var tankY = tankRect.top;  
  
        // 坦克移动速度  
        var tankSpeed = 5;  
  
        // 屏幕边界  
        var screenWidth = window.innerWidth;  
        var screenHeight = window.innerHeight;  
  
        // 禁用右键菜单  
        document.addEventListener('contextmenu', function(e) {  
            e.preventDefault();  
        });  
  
        // 键盘事件监听  
        document.addEventListener('keydown', function(event) {  
            var newX = tankX;  
            var newY = tankY;  
  
            switch (event.key) {  
                case 'w':  
                mytank.src='imher/up.png'
                case 'ArrowUp':  
                    newY -= tankSpeed;  
                    break;  

                case 's':  
                mytank.src='imher/down.png'
                case 'ArrowDown':  
                    newY += tankSpeed;  
                    break;  

                case 'a':  
                mytank.src='imher/left.png'
                case 'ArrowLeft':  
                    newX -= tankSpeed;  
                    break;  

                case 'd':  
                mytank.src='imher/right.png'
                case 'ArrowRight':  
                    newX += tankSpeed;  
                    break;  
                default:  
                    return;  
            }  
  
            // 防止坦克开出屏幕外  
            if (newX < 0) newX = 0;  
            if (newY < 0) newY = 0;  
            if (newX + tankRect.width > screenWidth) newX = screenWidth - tankRect.width;  
            if (newY + tankRect.height > screenHeight) newY = screenHeight - tankRect.height;  
  
            // 更新坦克位置  
            tank.style.left = newX + 'px';  
            tank.style.top = newY + 'px';  
  
            // 更新坦克的X和Y位置变量，以便下次使用  
            tankX = newX;  
            tankY = newY;  
        });  
  
    </script>  
</body>  
</html>